<!--
 * @Author: your name
 * @Date: 2021-05-08 21:20:59
 * @LastEditTime: 2021-05-08 21:33:02
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \finance-front\src\App.vue
-->
<template>
  <div class="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  created() {
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
  },
};
</script>
<style lang="less" scoped>
.app {
  width: 100%;
  height: 100%;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  padding-right: 0 !important;
}
// 每页顶部按钮居右测
.btns_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
    
}
.btns_box > .btn {
  margin-right: 10px;
}
// 表单间距
/deep/.el-form-item__label {
  line-height: 20px;
  padding-top: 10px;
  text-align: right;
  color: #606266;
}
/deep/.el-autocomplete {
  width: 100%;
}
/deep/.el-select {
  width: 100%;
}
/deep/.el-pagination {
  margin-top: 20px;
  text-align: center;
}
s
// 表格内容居中
/deep/.el-table .cell {
  text-align: center;
}
// 表头颜色
/deep/thead > tr > th {
  background-color: #b7dcfa;
  font-weight: 400;
  font-weight: 600;
  color: #444;
}
// 分页左对齐
/deep/.el-pagination {
  text-align: left;
}
// 禁用状态下的颜色
/deep/.el-input.is-disabled .el-input__inner ,
/deep/.el-form .el-input.is-disabled .el-input__inner,
/deep/.el-form .el-textarea.is-disabled .el-textarea__inner,
/deep/.el-form .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: rgb(122, 121, 121);
}
// 禁用状态下鼠标悬停不显示禁用图标
/deep/.el-input.is-disabled .el-input__inner{
  cursor:default
}
</style>
